<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="photos/UncleKevin icon.png">
    <title>UncleKevin 搜索</title>
    <link rel="stylesheet" href="css/3-搜索页.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="top">
        <div class="container">
            <ul class="top-left">
                <div class="download"><li style="color: #99999962;"><a href="">客户端下载&nbsp;</a></li></div>
                <div class="log-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html">登录</a></li></div>
                <div class="sign-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html" style="color:#f26704;">注册</a></li></div>
                <script>
                    $(".log-in").hover(
                        function(){
                        $(".log-in a").css({"margin-left":"40px",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".log-in a").css({"font-weight":"normal",
                                            "margin-left":"24px",});
                        }
                    );
                    $(".sign-in").hover(
                        function(){
                        $(".sign-in a").css({"font-weight":"bold",
                                            "margin-left":"38px"});
                        },
                        function(){
                        $(".sign-in a").css({"font-weight":"normal",
                                            "margin-left":"24px"});
                        }
                    );
                    $(".download").hover(
                        function(){
                        $(".download a").css({"color":"#f26704",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".download a").css({"font-weight":"normal",
                                            "color":"#888888",});
                        }
                    );
                </script>
            </ul>
            <ul class="top-right">
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/10-我的订单.html">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html">购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">收藏夹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li><a href="">联系客服</a></li>
            </ul>
        </div>
    </div>
    <div class="top-Menu">
        <div class="container">
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/1-首页.html"><img class="logo1" src="https://i.loli.net/2021/01/31/VlOCJo75ZI61uYd.png"></a>
            <div class="input-group">
                <input type="text" class="search-bar" placeholder="&nbsp;搜索商品/类别/店铺">
                <script>
                    // 当搜索框得到焦点时，边框加粗
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("border-width","3px");
                    });
                    // 当搜索框得到焦点时，添加阴影效果
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("box-shadow","8px 8px 16px 0 #f2670434, 8px 6px 10px 0px #f2670442");
                    });
                    // 当搜索框失去焦点时，边框还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("border-width","2px");
                    });
                    // 当搜索框失去焦点时，阴影效果还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("box-shadow","none");
                    });
                </script>
                <span class="input-group-btn">
                    <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html"><button class="btn btn-default btn-search" type="button">搜索</button></a> 
                </span>
            </div>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html"><img class="shopping-car" src="https://i.loli.net/2021/01/31/u9Zo5zvIFxqDVTl.png" title="我的购物车"></a>
        </div>
    </div>
    <div class="middle">
        <div class="container">
            <div class="classify1"> 
                <ul class="list list1">
                    <span>分类 ：</span>
                    <a href="">全部</a>
                    <a href="">手机</a>
                    <a href="">路由器</a>
                    <a href="">手表</a>
                    <a href="">穿戴</a>
                    <a href="">耳机</a>
                    <a href="">户外</a>
                    <a href="">电源电池</a>
                    <a href="">个护</a>
                    <a href="">手机配件</a>
                    <a href="">服务</a>
                </ul>
            </div>
            <div class="classify2">
                <ul class="list list2">
                    <span>拍照像素：</span>
                    <a href="">四摄像头</a>
                    <a href="">三摄像头</a>
                    <a href="">双摄像头</a>
                    <a href="">高清拍摄</a>
                </ul>
            </div>
            <div class="classify3">
                <ul class="list list3">
                    <span>屏幕大小：</span>
                    <a href="">超大屏</a>
                    <a href="">中小屏</a>
                </ul>
            </div>
            <div class="classify4">
                <ul class="list list4">
                    <span>运行内存：</span>
                    <a href="">极速畅玩</a>
                    <a href="">高速</a>
                    <a href="">流畅</a>
                </ul>
            </div>
        </div>
        <div class="container order-list">
            <ul>
                <li><a href="" style="color: #f24f04;margin-left: 5px;">综合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="color: #99999962;">|</h></li>
                <li><a href="">新品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="color: #99999962;">|</h></li>
                <li><a href="">销量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="color: #99999962;">|</h></li>
                <li><a href="">价格</a></li>
            </ul>
        </div>
    </div>
    <div class="main-top container">
        <ul>
            <li style="margin-left: 15px;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html"><img src="https://i.loli.net/2021/02/18/toIyAjaE83T4ifF.png" alt=""></a></li>
            <li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html"><img src="https://i.loli.net/2021/02/18/upsfSZj6ql7QzC3.png" alt=""></a></li>
            <li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html"><img src="https://i.loli.net/2021/02/18/QZ5DKCb36IJYBgy.png" alt=""></a></li>
            <li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html"><img src="https://i.loli.net/2021/02/18/SbEdXPU7VQGyekl.png" alt=""></a></li>
        </ul>
    </div>
    <div class="main container">
        <div class="HuaWeiS">
            <ul>
                <li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html"><img src="https://i.loli.net/2021/02/18/mPhpUJ4fwCjXBFW.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="HuaWei">
            <ul class="HuaWei-top">
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-1"><img src="https://i.loli.net/2021/02/18/1ceJIUx3zV8rZHj.png" alt=""></li>
                    <p class="grid-title grid-title1 grid-title-1" style="margin-left: -192px;margin-top: 195px;">HUAWEI Mate 30E Pro 5G</p>
                    <p class="title grid-title-1" style="margin-left: -150px;">以旧换新享补贴</p>
                    <p class="price grid-title-1" style="margin-left: -120px;">¥5299</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-2"><img src="https://i.loli.net/2021/02/18/2fu7wqi1vyU4VxK.png" alt=""></li>
                    <p class="grid-title grid-title1 grid-title-2" style="margin-left: -171px;margin-top: 195px;">HUAWEI Mate 40 5G</p>
                    <p class="title grid-title-2" style="margin-left: -135px;">享多重权益</p>
                    <p class="price grid-title-2" style="margin-left: -120px;">¥4999</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-3"><img src="https://i.loli.net/2021/02/18/fUmW5tEZg3jbBy2.png" alt=""></li>
                    <p class="grid-title grid-title1 grid-title-3" style="margin-left: -175px;margin-top: 195px;">HUAWEI P40 Pro+ 5G</p>
                    <p class="title grid-title-3" style="margin-left: -128px;">徕卡五摄</p>
                    <p class="price grid-title-3" style="margin-left: -120px;">¥7999</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-4"><img src="https://i.loli.net/2021/02/18/Xfre8WbSlimZgzt.png" alt=""></li>
                    <p class="grid-title grid-title1 grid-title-4">HUAWEI nova 8 Pro</p>
                    <p class="title grid-title-4" style="margin-left: -125px;">新品上市</p>
                    <p class="price grid-title-4" style="margin-left: -120px;">¥3999</p>
                </a>
            </ul>
            <ul class="HuaWei-bottom">
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-5"><img src="https://i.loli.net/2021/02/18/VUsitnYd8BIAbml.png" alt=""></li>
                    <p class="grid-title grid-title2 grid-title-5" style="margin-left: -160px;">WATCH GT 2 Pro</p>
                    <p class="title grid-title-5" style="margin-left: -128px;margin-top: 232px;">限时优惠</p>
                    <p class="price grid-title-5" style="margin-left: -120px;margin-top: 259px;">¥2688</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-6"><img src="https://i.loli.net/2021/02/18/tocgSN87u1V2nOe.png" alt=""></li>
                    <p class="grid-title grid-title2 grid-title-6" style="margin-left: -175px;">MateBook X Pro 2021</p>
                    <p class="title grid-title-6" style="margin-left: -131px;margin-top: 232px;">享3期免息</p>
                    <p class="price grid-title-6" style="margin-left: -120px;margin-top: 259px;">¥9999</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-7"><img src="https://i.loli.net/2021/02/18/Ij3dN9wlPoBgR5i.png" alt=""></li>
                    <p class="grid-title grid-title2 grid-title-7" style="margin-left: -163px;">华为智慧屏 55英寸</p>
                    <p class="title grid-title-7" style="margin-left: -150px;margin-top: 232px;">AI升降式摄像头</p>
                    <p class="price grid-title-7" style="margin-left: -120px;margin-top: 259px;">¥4299</p>
                </a>
                <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/4-商品详情.html">
                    <li class="li-8"><img src="https://i.loli.net/2021/02/18/SnhHPa9bR23YZpI.png" alt=""></li>
                    <p class="grid-title grid-title2 grid-title-8" style="margin-left: -160px;">HUAWEI Sound X</p>
                    <p class="title grid-title-8" style="margin-left: -130px;margin-top: 232px;">一键传音</p>
                    <p class="price grid-title-8" style="margin-left: -120px;margin-top: 259px;">¥1999</p>
                </a>
            </ul>
        </div>
    </div>
    <div class="bottom container">
        <div class="container">
            <div class="bottom-main">
            <ul class="bottom-main-ul">
                <li style="color: #99999962;margin-left: 0px;"><a href="">关于我们&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">联系我们&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">合作招商&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">营销中心&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">友情链接&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">销售联盟&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">隐私政策&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">服务条款&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">风险监测&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 0px;float: right;">|</h></li>
                <li><a href="">English Site</a></li>
            </ul>
            </div>
        </div>
    </div>
</body>
</html>